<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>审批详情</title>
    <link rel="stylesheet" type="text/css" href="../../css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/approvalInfo.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/commonality.css"/>
    <script src="../../js/mui.min.js"></script>
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jquery.flexText.min.js"></script>
    <script src="../../js/vue.js"></script>
    <script src="../../js/main.js"></script>
</head>
<body>
<div id="app">
    <header class="mui-bar mui-bar-nav">
        <span class="back" @click="back"></span>
        <span class="cross" @click="close"></span>
        <h1 class="mui-title my_mui-title">审批详情</h1>
        <button type="button" class="mui-btn mui-btn-link" @click="cancel" v-if="isCancel">撤销</button>
    </header>
    <div class="mui-content" v-if="!isShow">
        <div class="module">
            <div class="title">
                <div class="person">
                    <div >
                        <div class="person-img" v-text="approvalInfo.hName"></div>
                    </div>
                    <p class="name" v-text="approvalInfo.zhName"></p>
                    <p><span v-text="approvalInfo.creatTime"></span></p>
                    <p class="status" :class="approvalInfo | getStatusClass">{{approvalInfo | getStatus}}</p>
                    <div class="clearFix"></div>
                </div>
            </div>
            <div class="mui-input-row" v-for="zgApply in approvalInfo.zgApplyTextExtends">
                <label v-text="zgApply.title"></label>
                <div class="info" v-text="zgApply.content"></div>
                <div class="clearFix"></div>
            </div>
        </div>
        <div class="module">
            <!--<div class="dashed"></div>-->
            <div class="approver">
                <div class="add-approver ">

                    <div class="people">
                        <div class="approver-img" :style="change_bg()">{{approvalInfo.zhName | getHName}}</div>
                        <div class="clearFix"></div>
                    </div>
                    <div class="people_status">
                        <p class="add-person">发起申请</p>
                        <!--<p class="add-person date" >{{approvalInfo.creatTime | getTime}}</p>-->
                        <p class="add-person date dates" v-text="approvalInfo.creatTime"></p>

                    </div>
                    <div class="clearFix"></div>
                </div>
                <div class="add-approver" v-for="approver in approvalInfo.zgApplyApproveExtends">

                    <div class="people my-approver">
                        <div class="dashed"></div>
                        <div class="approver-img" :style="change_bg()">{{approver.zhName | getHName}}</div>
                        <div class="clearFix"></div>
                    </div>
                    <div class="people_status">
                        <p class="add-person">
                            <span v-text="approver.zhName"></span>
                            <span :class="approver.status | getStatusClass">{{approver.status | getStatus}}</span>
                        </p>
                        <p class="add-person isAgree" v-text="approver.status == 0 ? '默认待审': approver.content"></p>
                        <p class="add-person date" v-text="approver.approveTime"></p>
                    </div>
                    <div class="clearFix"></div>
                </div>
            </div>
        </div>
        <div class="module">
            <div class="carbonCopy ">
               <p>抄送人&nbsp; :&nbsp; <span>(审批通过后，通知抄送人)</span></p>
                <div class="add-approver" v-for="ccUser in approvalInfo.zgApplyCcExtends">
                    <div >
                        <div class="approver-img" :style="change_bg()">{{ccUser.zhName | getHName}}</div>
                    </div>
                    <p class="add-person" v-text="ccUser.zhName"></p>
                </div>
                <div style="clear:both;"></div>
            </div>
            <div class="approver" >
                <p class="review">评论 : </p>
                <div class="add-approver comment" v-for="zgReview in approvalInfo.zgApplyCommentExtends"  >    <!--v-for="commet in obj.commetList"-->
                    <div>
                        <div class="approver-img" :style="change_bg()">{{zgReview.createUserName | getHName}}</div><!--{{commet.createUserName|getHName}}-->
                    </div>
                    <div class="people_status review-myStyle rt">
                        <p class="add-person name" v-text="zgReview.createUserName"></p><!--v-text="commet.createUserName"-->
                        <p class="add-person isAgree" v-text="zgReview.content" ></p><!--v-text="commet.content"-->
                        <p class="add-person date" v-text="zgReview.createTime" ></p><!--v-text="commet.createTime"-->
                    </div>

                    <div class="clearFix"></div>
                </div>
            </div>
        </div>
        <div class="module">
            <div class="approver-review">
                <textarea class="review-advice-content"  placeholder="评论意见..." v-model="reviewSuggest"></textarea>
                <button class="mui-btn mui-btn-primary submit-review-btn" @click="comment"  >提交评论</button>
            </div>
        </div>
        <div class="approve_footer footer" v-if="okApprove">
            <div class="submit-btn">
                <button class="mui-btn mui-btn-primary" @click="goReview('agree')">同意</button>
            </div>
            <div class="submit-btn">
                <button class="mui-btn mui-btn-primary" @click="goReview('deny')">拒绝</button>
            </div>

        </div>

        <div class="totalStatus" :style="{backgroundImage:getBg}"></div>
    </div>
    <div class="mui-content-review" v-show="isShow">
        <div class="textarea-review">
            <textarea placeholder="请输入意见" v-model="reviewContent"></textarea>
        </div>
        <div class="footer">
            <div class="submit-btn">
                <button class="mui-btn mui-btn-primary" @click="submit">发送</button>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    function UrlSearch(){
        var name,value;
        var str=location.href; //取得整个地址栏
        var num=str.indexOf("?");
        str=str.substr(num+1); //取得所有参数   stringvar.substr(start [, length ]

        var arr=str.split("&"); //各个参数放到数组里
        for(var i=0;i < arr.length;i++){
            num=arr[i].indexOf("=");
            if(num>0){
                name=arr[i].substring(0,num);
                value=arr[i].substr(num+1);
                this[name]=value;
            }
        }
    }
    var Request=new UrlSearch(); //实例化

    function sendInfoToJava(name) {
        //调用android程序中的方法，并传递参数
        javascript:WebView.showInfoFromJs(name);
    }

    $(function () {
        var app = new Vue({
            el: "#app",
            data: function () {
                return{
                    loginName:"",
                    okApprove:false,
                    isCancel:true,
                    getBg:"",
                    popup: false,
                    not_finish: "",
                    cause: "",
                    detail: "",
                    groups: [],
                    group_name: [],
                    group: false,
                    approvalInfo:{},
                    detailId:localStorage.detailId,
                    isShow:false,
                    operate:0,
                    reviewContent:"",
                    reviewSuggest:"",
                    reviewIsShow:false,
                    approveIndex:0,
                    status:0
                }
            },
            filters: {
               getTime:function(input){
                   var timeArr = input.splice(" ");
                   console.log(timeArr);
               },
                getMyTime:function(input){
                     var times = input.slice(6);
                     return times;
                },
               getStatus: function(input) {
                    if(input.status == 0){
                        if(input.approveIndex > 1){
                            return '审批中';
                        }else{
                            return'待审批'
                        }
                    }/*else if(input == 1){
                        return '已同意';
                    }else if(input == 2){
                        return '已拒绝';
                    }*/else if(input.status == 3){
                        return '审批中';
                    }else if(input.status == 4){
                        return '已撤回';
                    }
               },
               getApproStatus: function(input) {
                     if(input == 0){
                         return '默认等待';
                     }else if(input == 1){
                         return '同意';
                     }else if(input == 2){
                         return '拒绝';
                     }
               },
               getStatusClass: function(input) {
                   if(input.status == 0){
                       if(input.approveIndex > 1){
                           return 'approving';
                       }else{
                           return'standby'
                       }
//                       return 'standby';
                   }else if(input.status == 1){
                       return 'agreed';
                   }else if(input.status == 2){
                       return 'deny';
                   }else if(input.status == 3){
                       return 'approving';
                   }else if(input.status == 4){
                       return 'withdraw';
                   }

              },
               getHName: function(input) {
                   if(input != null){
                       return input.slice(-2);
                   }else{
                       return '';
                   }
               },
                getDate:function(input){
                   if(input != null){
                       return input.substr(5,11)
                   }
                }
            },
            methods: {
                back: function () {
                    var name = "back";
                    sendInfoToJava(name);
                },
                close: function () {
                    var name = "close";
                    sendInfoToJava(name);
                },
                approval_info: function() {
//                    debugger
                    var this_obj = this;
                    this_obj.loginName = Request.loginName;
                      var read_url = "/apply/"+localStorage.zgApplyId;
                      getAjax(read_url,function (res) {
                          this_obj.approveIndex = res.obj.approveIndex;
                          this_obj.status = res.obj.status;
                          this_obj.approvalInfo = res.obj;
                          console.log(this_obj.loginName);
                          console.log(res.obj.creatUserName);
                          console.log(res.obj.zgApplyApproveExtends[res.obj.approveIndex-1]["approveUserName"] );
                          console.log(res.obj.status);
                          if(this_obj.loginName == res.obj.creatUserName && res.obj.status == 0 && res.obj.approveIndex == 1 ){
                            this_obj.isCancel = true;  //如过此时是发送人登陆  并且第一个审批人还未审批  可撤回
                            this_obj.okApprove = false;  //同意决绝按钮不显示
                          }else if(this_obj.loginName == res.obj.creatUserName && res.obj.status == 0 && res.obj.approveIndex != 1 ){
                              this_obj.isCancel = false;
                              this_obj.okApprove = false;
                          }else if(this_obj.loginName == res.obj.zgApplyApproveExtends[res.obj.approveIndex-1]["approveUserName"] && res.obj.status == 0){
                            this_obj.okApprove = true;
                            this_obj.isCancel = false;
                          }else if(this_obj.loginName == res.obj.zgApplyApproveExtends[res.obj.approveIndex-1]["approveUserName"] && res.obj.status == 3){
                            this_obj.okApprove = true;
                            this_obj.isCancel = false;
                          }else if(this_obj.loginName != res.obj.zgApplyApproveExtends[res.obj.approveIndex-1]["approveUserName"]){
                              this_obj.okApprove = false;
                              this_obj.isCancel = false
                          }else{
                              this_obj.isCancel = false;
                              this_obj.okApprove = false;
                          }
                          var iscc = false;
                          for(var i in res.obj.zgApplyCcExtends){
                              if(this_obj.loginName == res.obj.zgApplyCcExtends[i]["ccUserName"]){
                                 iscc = true;
                                 break;
                              }
                              console.log("抄送人"+i+"是："+res.obj.zgApplyCcExtends[i]["ccUserName"]);
                          }
                          if(iscc){
                              this_obj.okApprove = false;
                              this_obj.isCancel = false;
                          }
                          this_obj.approvalInfo.hName = this_obj.approvalInfo.zhName.substr(0,1);
                          if(res.obj.status == 1){
                              this_obj.getBg = 'url(../../images/zx_qt_tg.png)';    //已同意
                          }else if(res.obj.status == 2){
                              this_obj.getBg = 'url(../../images/zx_qt_jj.png)';    //已拒绝
                          }
                      },function (res) {
//                          debugger
                      });
                },
                getNow: function() {d
                      var d = new Date();
                      var year = d.getFullYear();
                      var month = d.getMonth() + 1;
                      var hour = d.getHours();
                      var minutes = d.getMinutes();
                      var seconds = d.getSeconds();
                      return year+ '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds;
                },
                change_bg: function() {
                    var r = parseInt(Math.random()*255);
                    var g = parseInt(Math.random()*255);
                    var b = parseInt(Math.random()*255);
                    return{ 'background-color':"rgb("+r+","+g+","+b+")"} ;
                },
          /*      submit: function(type) {
//                             debugger
                    var this_obj = this;
                    var operate;
                  if(type == 'agree'){
                      operate = 1;
                  }else if(type == 'deny'){
                      operate = 2;
                  }
                  var data ={
                      "zgApplyId": localStorage.zgApplyId,//审批id
                      "zgApplyApproveExtends": [
                          {
                              "status": operate       //审批状态
                          }
                      ]
                    };
                    var url ="/apply/approve";
                  common_ajax(url,data,function(res) {
                   location.href = 'approval_record.html?cid='+Request.cid+'&'+'loginName='+Request.loginName;
                  },function() {
                    alert("审批失败")
                  });
                },*/
                submit: function() {
//                             debugger
                    var this_obj = this;
                    var data ={
                        "zgApplyId": localStorage.zgApplyId,//审批id
                        "zgApplyApproveExtends": [
                            {
                                "status": this_obj.operate ,      //审批状态
                                "content" :this_obj.reviewContent,
                                "approveUserName":Request.loginName
                            }
                        ]
                    };
                    var url ="/apply/approve";
                    if(typeof(Request.cid) == "undefined" || typeof(Request.loginName) == "undefined"){
                        mui.toast("请重新登录");
                    }else {
                        common_ajax(url, data, function (res) {
                            location.href = 'approval_record.html?cid=' + Request.cid + '&' + 'loginName=' + Request.loginName;
                        }, function () {
                            alert("审批失败")
                        });
                    }
                },
                goReview: function(type){
                    if(type == 'agree'){
                        this.operate = 1;
                    }else if(type == 'deny'){
                        this.operate = 2;
                    }
                    if(this .isShow == false){
                        this.isShow = true;
                    }else{
                        this.isShow = false;
                    }
                },
                comment: function() {
                    this_obj=this;
                    var data={};
                    data.createUser = Request.loginName;
                    data.applyId =localStorage.zgApplyId;
                    if(this_obj.reviewSuggest == ""){
                        mui.toast("请添加评论")
                    }else{
                        data.content = this_obj.reviewSuggest;
                        var url = "/apply/addComment";
                        if(typeof(Request.loginName) == "undefined"){
                            mui.toast("请重新登录");
                        }else {
                            common_ajax(url, data, function (res) {
                                this_obj.approval_info();
                                this_obj.reviewSuggest = "";
                                console.log("提交成功");
                            }, function (res) {
                                console.log("提交失败");
                            })
                        }
                    }
                },
                cancel:function(){
                    this_obj=this;
                    var data = {
                        "zgApplyId": localStorage.zgApplyId,
                        "status": 4
                    };
                    var url ="/apply/approve";
                    if(this_obj.approveIndex == 1 && this_obj.status == 0){
                        common_ajax(url, data, function (res) {
                            this_obj.isCancel = false;    //用来判断显示按钮的显示情况
                            this_obj.approval_info();
                        }, function () {
                            alert("撤销失败")
                        });
                    }else{
                        mui.toast("不能撤销")
                    }
                }
            }
        });
        app.approval_info();
    })
    $(function () {
        $('textarea').flexText();
    });
</script>
</html>